import React, { Component } from 'react'

class Demo extends Component {
  constructor() {
    super()
    console.log('demo 构造器')
  }
  render() {
    console.log('demo render钩子')
    return (
      <div>
        <h3>{this.props.count}</h3>
      </div>
    )
  }
  componentDidMount() {
    // 如果 子组件有 定时器等任务时 组件卸载 要清理掉
    this.timerId = window.setInterval(() => {
      console.log('demo....')
    }, 200)
    console.log('demo componentDidMount')
  }
  componentDidUpdate() {
    console.log('demo componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('demo componentWillUnmount 卸载了')
    // 清除定时器...
    window.clearInterval(this.timerId)
  }
}

export default class App extends Component {
  // 1.
  constructor() {
    super()
    console.log('App 构造器')
  }
  state = {
    count: 0,
  }
  // 2.
  render() {
    console.log('App render钩子')
    return (
      <div>
        <h1>组件的钩子函数</h1>
        {this.state.count < 5 ? <Demo count={this.state.count}></Demo> : ''}
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          打豆豆
        </button>
      </div>
    )
  }
  // 3.
  componentDidMount() {
    console.log('App componentDidMount')
  }
  // 4. 更新的时候 执行
  componentDidUpdate() {
    console.log('App componentDidUpdate')
  }
  // 5.
  componentWillUnmount() {
    console.log('App componentWillUnmount 卸载了')
  }
}
